<template>
  <div class="bus page">
    <div class="yf-form">
      <div class="yf-inps two">
        <yf-input :value="topUserName" disabled="disabled" label="推荐人" type="text" class="yf-inp"></yf-input>
        <yf-input v-if="pubLevelList.length>1" @click.native="showPicker" disabled="disabled" label="注册身份" class="yf-inp"
                  :value="levelName"></yf-input>
      </div>

      <div class="yf-inps two">
        <yf-input v-model="user.name" label="姓名实名" type="text" class="yf-inp"></yf-input>
        <yf-input v-model="user.mobile" label="手机号" class="yf-inp" type="number"></yf-input>
      </div>

      <div class="yf-inps two"  v-if="user.levelId==LEVELS.CUSTOM">
        <yf-input @click.native="showDatePicker" disabled="disabled" label="生日" class="yf-inp"
                  :value="birthDate"></yf-input>
        <yf-input v-model="user.sex" label="性别" type="sex" class="yf-inp"></yf-input>
<!--        <yf-input v-model="user.workUnit"  label="工作单位" type="text" class="yf-inp"></yf-input>-->
      </div>

      <div class="yf-inps two"  v-if="user.levelId>=LEVELS.SHOP">
        <yf-input v-model="user.bankUser" label="开户人" type="text" p-holder="银行卡开户人" class="yf-inp"></yf-input>
        <yf-input v-model="user.bankNum" label="开户号" type="text" p-holder="银行卡号" class="yf-inp"></yf-input>
      </div>

      <div class="yf-inps two"  v-if="user.levelId>=LEVELS.SHOP">
        <yf-input v-model="user.bankName" label="开户银行" type="text" p-holder="开户银行名" class="yf-inp"></yf-input>
        <yf-input v-model="user.bankBranch" label="开户银行分行" type="text" p-holder="开户银行分行名" class="yf-inp"></yf-input>
      </div>

      <div class="bus" v-if="user.levelId==LEVELS.BUS">
        <div class="yf-inps">
          <yf-input v-model="user.idCard" label="身份证号" type="text" p-holder="公司会保密 放心填写" class="yf-inp"></yf-input>
        </div>
        <div class="yf-inps two">
          <yf-input v-model="user.age" label="年龄" type="number" class="yf-inp"></yf-input>
          <yf-input v-model="user.sex" label="性别" type="sex" class="yf-inp"></yf-input>
        </div>
        <div class="yf-inps two">
          <yf-input v-model="user.edu" label="学历" type="edu" class="yf-inp"></yf-input>
          <yf-input v-model="user.major" label="专业" type="text" class="yf-inp number"></yf-input>
        </div>
        <div class="yf-inps">
          <yf-input label="入职时间" p-holder="如实填写" v-model="user.joinDate" type="date" class="yf-inp"></yf-input>
        </div>
              <div class="yf-inps">
                <yf-input :value="user.address" @click.native="showAddress" disabled="disabled" label="省/市/县" type="text"
                          class="yf-inp"></yf-input>
              </div>
      </div>
    </div>

    <div class="shop" v-if="user.levelId==LEVELS.SHOP">

      <div class="yf-inps two">
        <yf-input :value="this.user.shopName" @click.native="showShopPick" disabled="disabled" label="选择门店" type="text" class="yf-inp"></yf-input>
        <yf-input @click.native="showDatePicker" disabled="disabled" label="生日" class="yf-inp"
                  :value="birthDate"></yf-input>
      </div>

      <div class="yf-inps">
        <yf-input :value="user.address" @click.native="showAddress" disabled="disabled" label="省/市/县" type="text"
                  class="yf-inp"></yf-input>
      </div>
<!--      <div class="yf-inps two">-->
<!--        <yf-input v-model="user.linkName" label="连锁名称" type="text" class="yf-inp"></yf-input>-->
<!--        <yf-input v-model="user.shopCode" label="药店代码" type="text" class="yf-inp"></yf-input>-->
<!--      </div>-->

<!--      <div class="yf-inps">-->
<!--        <yf-input v-model="user.shopName" label="门店名称" type="text" class="yf-inp"></yf-input>-->
<!--      </div>-->

<!--      <div class="yf-inps">-->
<!--        <yf-input :value="user.address" @click.native="showAddress" disabled="disabled" label="省/市/县" type="text"-->
<!--                  class="yf-inp"></yf-input>-->
<!--      </div>-->

<!--      <div class="yf-inps">-->
<!--        <yf-input v-model="user.detail" label="详细地址" type="text" class="yf-inp"></yf-input>-->
<!--      </div>-->

    </div>

    <div class="btn"  @click="confirm">
      提交数据
    </div>
  </div>
</template>

<script>
import yfInput from '../../components/base/yf-input'
import { listPubLevel } from '../../api/level'
import { addressData } from '../../util/area'
import { register, getName, info } from '../../api/user'
import { mapActions } from 'vuex'
import { LEVELS, LEVEL_NAMES } from '../../const'
import { parseTime } from '@/util/time'
import { listShopByUserId } from '@/api/shop'
import { showCorrect, showPrompt } from '@/dialog'
import { showError } from '@/toast'
import { getLastPath } from '@/cookie'

export default {
  computed: {
    birthDate () {
      if (this.user.birth) {
        return parseTime(this.user.birth, '{y}-{m}-{d}')
      }
      return ''
    },
    LEVELS () {
      return LEVELS
    },
    levelName () {
      return LEVEL_NAMES[this.user.levelId]
    }
  },
  created () {
    if (this.$route.query.userId) { // 修改的
      info(this.$route.query.userId).then(res => {
        this.user = res.data
        // // 获取比推荐人低的公开级别
        listPubLevel(this.user.pid).then(res => {
          this.pubLevelList = res.data
        })
        listShopByUserId(this.user.pid).then(res => {
          this.shops = res.data
        })
        // 获取推荐人名字
        getName(this.user.pid).then(res => {
          this.topUserName = res.data
        })
      })
    } else {
      // 获取Login页面传过来的微信用户等信息
      this.user = Object.assign(this.user, this.$route.query)
      // 获取比推荐人低的公开级别
      listPubLevel(this.user.pid).then(res => {
        this.pubLevelList = res.data
        this.user.levelId = this.pubLevelList[this.pubLevelList.length - 1].id
      })
      listShopByUserId(this.user.pid).then(res => {
        this.shops = res.data
      })

      // 获取推荐人名字
      getName(this.user.pid).then(res => {
        this.topUserName = res.data
      })
    }
  },
  methods: {
    ...mapActions([
      'setUser'
    ]),
    showShopPick () {
      let list = []
      showPrompt('药店关键词筛选').then(res => {
        if (res) {
          list = this.shops.filter(shop => shop && shop.shopName.indexOf(res) > -1)
          if (list.length == 0) {
            showError('没有符合条件的药店')
          } else {
            this.shopPicker = this.$createPicker({
              title: '选择门店',
              data: [list],
              alias: {
                value: 'id',
                text: 'shopName'
              },
              onSelect: this.selShop
            })
            this.shopPicker.show()
          }
        } else {
          showCorrect('请输入关键词筛选药店')
        }
      })
    },
    selShop (selectedVal, selectedIndex, selectedText) {
      this.user.shopId = selectedVal.join()
      this.user.shopName = selectedText.join()
    },
    showAddress () {
      this.addressPicker = this.$createCascadePicker({
        title: '选择地址',
        data: addressData,
        onSelect: this.selectAddress
      })
      this.addressPicker.show()
    },
    selectAddress (value, index, text) {
      this.user.address = text.join('/')
      this.user.province = text[0]
      this.user.city = text[1]
      this.user.county = text[2]
    },
    confirm () {
      if (!this.user.mobile || this.user.mobile.length != 11) {
        showError('请填写正确的手机号')
      }
      register(this.user).then(res => {
        const user = res.data
        user.token = res.extra.token
        // this.setUser(user)
        // this.$router.push('/')
        if (this.$route.query.userId) {
          this.$router.replace('/user/info')
        } else {
          if (getLastPath().indexOf('img') > -1) {
            this.$router.replace(getLastPath())
          } else {
            this.$router.push('/code')
          }
        }
      })
    },
    showDatePicker () {
      if (!this.datePicker) {
        this.datePicker = this.$createDatePicker({
          title: '选择生日',
          min: new Date(1970, 7, 8),
          max: new Date(2020, 9, 20),
          value: new Date(),
          onSelect: this.selectHandle
        })
      }
      this.datePicker.show()
    },
    selectHandle (date, selectedVal, selectedText) {
      this.user.birth = parseTime(date)
    },
    showPicker () {
      if (this.$route.query.userId) {
        // 不可以修改级别
        return
      }
      if (!this.picker) {
        this.picker = this.$createPicker({
          title: '选择注册的身份',
          data: [this.pubLevelList],
          onSelect: this.selectLevel,
          alias: {
            value: 'id',
            text: 'name'
          }
        })
      }
      this.picker.show()
    },
    selectLevel (value, index, text) {
      this.user.levelId = value.join()
      this.user.levelName = text.join()
    }
  },
  data () {
    return {
      pubLevelList: [],
      topUserName: null,
      cus: false,
      shops: [],
      user: {
        workUnit: null,
        address: null,
        name: null,
        shopId: null,
        mobile: null,
        birth: null,
        bankUser: null,
        bankNum: null,
        bankName: null,
        bankBranch: null,
        sex: null,
        joinDate: null,
        idCard: null,
        age: null,
        major: null,
        edu: null,
        pid: null,
        levelId: 0,
        // 药店
        linkName: null,
        shopName: null,
        shopCode: null,
        province: null,
        city: null,
        county: null,
        detail: null

      }
    }
  },
  components: {
    yfInput
  }
}
</script>

<style scoped lang="stylus">
  .bus
    .btn
      height: 44px;
      background: rgba(0, 156, 78, 1);
      border-radius: 20px;
      display flex
      align-items center
      justify-content center
      dpr-font(14px)
      color #FFFFFF
      margin-top 47px

</style>
